<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Google OAuth 认证</title>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
            max-width: 700px;
            margin: 0 auto;
            padding: 20px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .container {
            background: white;
            padding: 40px;
            border-radius: 15px;
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
            width: 100%;
            max-width: 600px;
        }
        h1 {
            color: #333;
            text-align: center;
            margin-bottom: 30px;
            font-size: 28px;
            font-weight: 300;
        }
        .logo {
            text-align: center;
            margin-bottom: 30px;
        }
        .logo svg {
            width: 60px;
            height: 60px;
        }
        .form-group {
            margin-bottom: 25px;
        }
        label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
            color: #555;
            font-size: 14px;
        }
        input[type="text"], input[type="password"] {
            width: 100%;
            padding: 12px 16px;
            border: 2px solid #e1e5e9;
            border-radius: 8px;
            font-size: 16px;
            box-sizing: border-box;
            transition: all 0.3s ease;
        }
        input[type="text"]:focus, input[type="password"]:focus {
            border-color: #4285f4;
            outline: none;
            box-shadow: 0 0 0 3px rgba(66, 133, 244, 0.1);
        }
        .btn {
            background: linear-gradient(135deg, #4285f4, #34a853);
            color: white;
            padding: 14px 30px;
            border: none;
            border-radius: 8px;
            font-size: 16px;
            cursor: pointer;
            width: 100%;
            margin-bottom: 15px;
            font-weight: 600;
            transition: all 0.3s ease;
        }
        .btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 20px rgba(66, 133, 244, 0.3);
        }
        .btn:active {
            transform: translateY(0);
        }
        .btn:disabled {
            background: #ccc;
            cursor: not-allowed;
            transform: none;
            box-shadow: none;
        }
        .btn.secondary {
            background: linear-gradient(135deg, #34a853, #fbbc04);
        }
        .btn.download {
            background: linear-gradient(135deg, #ea4335, #ff6900);
        }
        .auth-url {
            background: #f8f9fa;
            border: 2px solid #e1e4e8;
            border-radius: 8px;
            padding: 20px;
            margin: 25px 0;
            word-break: break-all;
            border-left: 4px solid #4285f4;
        }
        .auth-url a {
            color: #4285f4;
            text-decoration: none;
            font-weight: 600;
        }
        .auth-url a:hover {
            text-decoration: underline;
        }
        .credentials {
            background: #f0f8ff;
            border: 2px solid #b0d4ff;
            border-radius: 8px;
            padding: 20px;
            margin: 25px 0;
            font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
            font-size: 12px;
            white-space: pre-wrap;
            word-break: break-all;
            max-height: 400px;
            overflow-y: auto;
            border-left: 4px solid #34a853;
        }
        .status {
            padding: 15px 20px;
            border-radius: 8px;
            margin: 20px 0;
            font-weight: 500;
        }
        .status.success {
            background: #d4edda;
            border: 2px solid #c3e6cb;
            color: #155724;
            border-left: 4px solid #28a745;
        }
        .status.error {
            background: #f8d7da;
            border: 2px solid #f5c6cb;
            color: #721c24;
            border-left: 4px solid #dc3545;
        }
        .status.info {
            background: #d1ecf1;
            border: 2px solid #bee5eb;
            color: #0c5460;
            border-left: 4px solid #17a2b8;
        }
        .status.warning {
            background: #fff3cd;
            border: 2px solid #ffeaa7;
            color: #856404;
            border-left: 4px solid #ffc107;
        }
        .hidden {
            display: none;
        }
        .loading {
            text-align: center;
            color: #666;
        }
        .login-form {
            text-align: center;
            padding: 20px 0;
        }
        .steps {
            background: #f8f9fa;
            border-radius: 8px;
            padding: 20px;
            margin: 25px 0;
            border-left: 4px solid #ffc107;
        }
        .steps h4 {
            margin-top: 0;
            color: #333;
            font-size: 16px;
        }
        .steps ol {
            margin: 15px 0;
            padding-left: 20px;
        }
        .steps li {
            margin-bottom: 8px;
            color: #555;
            line-height: 1.5;
        }
        .api-warning {
            background: #fff3cd;
            border: 2px solid #ffeaa7;
            border-radius: 8px;
            padding: 20px;
            margin: 25px 0;
            border-left: 4px solid #ffc107;
        }
        .api-warning h4 {
            color: #856404;
            margin-top: 0;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .api-warning a {
            color: #4285f4;
            text-decoration: none;
            font-weight: 600;
        }
        .api-warning a:hover {
            text-decoration: underline;
        }
        .progress-bar {
            background: #e9ecef;
            border-radius: 10px;
            height: 8px;
            margin: 15px 0;
            overflow: hidden;
        }
        .progress-fill {
            background: linear-gradient(135deg, #28a745, #20c997);
            height: 100%;
            width: 0%;
            transition: width 0.3s ease;
        }
        .footer {
            text-align: center;
            margin-top: 30px;
            padding-top: 20px;
            border-top: 1px solid #e1e5e9;
            color: #666;
            font-size: 14px;
        }
        @media (max-width: 768px) {
            body {
                padding: 10px;
            }
            .container {
                padding: 20px;
            }
        }
        
        /* 下载按钮动画 */
        .download-animation {
            animation: downloadPulse 2s infinite;
        }
        
        @keyframes downloadPulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.05); }
            100% { transform: scale(1); }
        }
    </style>
</head>
<body>
    <div class="container">
        
        <!-- 登录界面 -->
        <div id="loginSection">
            <div class="logo">
                <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285F4"/>
                    <path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853"/>
                    <path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05"/>
                    <path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335"/>
                </svg>
            </div>
            <h1>Google OAuth 认证</h1>
            <div class="login-form">
                <div class="form-group">
                    <input type="password" id="password" placeholder="请输入访问密码" onkeypress="handlePasswordEnter(event)" />
                </div>
                <button class="btn" onclick="login()">登录</button>
            </div>
        </div>

        <!-- 主界面 -->
        <div id="mainSection" class="hidden">
            <h1>Google OAuth 认证</h1>
            
            <!-- API 自动启用说明 -->
            <div class="status info">
                <h4>✨ 自动化优化</h4>
                <p style="margin: 15px 0;">系统现在会在认证成功后自动为您的项目启用以下必需的API服务：</p>
                <ul style="margin: 15px 0; padding-left: 20px;">
                    <li><strong>Gemini Cloud Assist API</strong></li>
                    <li><strong>Gemini for Google Cloud API</strong></li>
                </ul>
                <p style="margin: 15px 0; color: #0c5460;"><strong>说明：</strong>无需手动启用API，系统会自动处理这些配置步骤。</p>
            </div>

            <!-- 折叠式 Project ID 输入框 -->
            <div class="form-group">
                <div style="cursor: pointer; user-select: none; padding: 12px; border: 2px solid #e1e5e9; border-radius: 8px; background: #f8f9fa; display: flex; justify-content: space-between; align-items: center;" onclick="toggleProjectIdSection()">
                    <span style="font-weight: 600; color: #555;">📁 高级选项：Google Cloud Project ID (不用管，直接点击获取链接即可)</span>
                    <span id="projectIdToggleIcon" style="font-size: 14px; color: #666; transition: transform 0.3s ease;">▶</span>
                </div>
                <div id="projectIdSection" style="display: none; margin-top: 15px; padding: 15px; border: 2px solid #e1e5e9; border-top: none; border-radius: 0 0 8px 8px; background: #ffffff;">
                    <label for="projectId" style="display: block; margin-bottom: 8px; font-weight: 600; color: #555; font-size: 14px;">Google Cloud Project ID (可选):</label>
                    <input type="text" id="projectId" style="width: 100%; padding: 12px 16px; border: 2px solid #e1e5e9; border-radius: 8px; font-size: 16px; box-sizing: border-box; transition: all 0.3s ease;" placeholder="留空将尝试自动检测，或手动输入项目ID" />
                    <small style="color: #666; font-size: 12px; margin-top: 5px; display: block;">
                        💡 提示：如果你不懂这是什么，可以留空此字段让系统自动检测项目ID
                    </small>
                </div>
            </div>
            
            <button class="btn" id="getAuthBtn" onclick="startAuth()">获取认证链接</button>
            
            <div id="authUrlSection" class="hidden">
                <h3>步骤一：认证链接</h3>
                <div class="auth-url">
                    <a id="authUrl" href="#" target="_blank">点击此链接进行 OAuth 认证</a>
                </div>
                
                <div class="steps">
                    <h4>认证步骤：</h4>
                    <ol>
                        <li>点击上方认证链接，在新窗口中完成 Google 登录</li>
                        <li>授权应用访问您的 Google Cloud 项目</li>
                        <li>看到 "OAuth authentication successful!" 页面后，关闭该窗口</li>
                        <li>返回本页面，点击下方"获取认证文件"按钮</li>
                    </ol>
                    
                    <div class="status warning" style="margin-top: 20px;">
                        <h4>⚠️ 注意</h4>
                        <p>当回源时，网页访问会显示报错。这时请手动将浏览器地址栏的 <code>localhost</code> 修改为 <code>gcli-auth.sukaka.top</code>，然后重新访问即可。</p>
                    </div>
                </div>
                
                <!-- 快捷回调URL输入选项 -->
                <div style="margin: 20px 0; padding: 15px; border: 2px solid #e8f4fd; border-radius: 8px; background: #f8fcff;">
                    <div style="cursor: pointer; user-select: none; display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;" onclick="toggleCallbackUrlSection()">
                        <span style="font-weight: 600; color: #0066cc; font-size: 16px;">🚀 无法回源？试试快捷方式</span>
                        <span id="callbackUrlToggleIcon" style="font-size: 14px; color: #666; transition: transform 0.3s ease;">▼</span>
                    </div>
                    <div id="callbackUrlSection" style="display: none;">
                        <div style="background: #fff3cd; border: 1px solid #ffeaa7; border-radius: 6px; padding: 12px; margin-bottom: 12px;">
                            <div style="color: #856404; font-size: 14px; font-weight: bold; margin-bottom: 6px;">📚 适用场景：</div>
                            <ul style="color: #856404; font-size: 13px; margin: 0; padding-left: 18px; line-height: 1.5;">
                                <li>云服务器、VPS等非本地环境</li>
                                <li>防火墙阻止了回调端口访问</li>
                                <li>网络环境无法正常回源</li>
                                <li>Docker容器端口映射问题</li>
                            </ul>
                        </div>
                        <div style="color: #666; font-size: 13px; margin-bottom: 12px; line-height: 1.6;">
                            <strong style="color: #0066cc;">🔍 什么是回调URL？</strong><br>
                            完成Google OAuth授权后，浏览器地址栏显示的完整URL，通常看起来像这样：<br>
                            <code style="background: #f1f3f4; padding: 2px 6px; border-radius: 3px; font-size: 12px; word-break: break-all; display: block; margin-top: 4px;">
                                http://localhost:8080/?state=abc123...&code=4/0AVMBsJ...&scope=email%20profile...
                            </code>
                        </div>
                        <div style="background: #e7f3ff; border: 1px solid #b3d9ff; border-radius: 6px; padding: 10px; margin-bottom: 12px;">
                            <div style="color: #0066cc; font-size: 13px; font-weight: bold; margin-bottom: 4px;">📋 使用步骤：</div>
                            <ol style="color: #0066cc; font-size: 12px; margin: 0; padding-left: 18px; line-height: 1.4;">
                                <li>点击上方认证链接，完成Google授权</li>
                                <li>授权成功后，复制浏览器地址栏的<strong>完整URL</strong></li>
                                <li>粘贴到下方输入框，点击获取凭证即可</li>
                            </ol>
                        </div>
                        <div style="margin-bottom: 12px;">
                            <input type="url" id="callbackUrlInput" placeholder="粘贴完整的回调URL，例如：http://localhost:8080/?state=xxx&code=xxx&scope=xxx..." 
                                   style="width: 100%; padding: 10px; border: 2px solid #ddd; border-radius: 4px; font-size: 13px; box-sizing: border-box;">
                        </div>
                        <button class="btn" style="background: #28a745; border-color: #28a745;" onclick="processCallbackUrl()">
                            从回调URL获取凭证
                        </button>
                    </div>
                </div>
                
                <button class="btn secondary" id="getCredsBtn" onclick="getCredentials()">获取认证文件</button>
            </div>
            
            <div id="credentialsSection" class="hidden">
                <h3>步骤二：认证成功！</h3>
                <div class="status success">
                    <strong>✅ OAuth 认证成功完成！</strong><br>
                    认证文件已生成，您可以下载保存或复制使用。
                </div>
                
                <div class="credentials" id="credentialsContent"></div>
                
                <button class="btn download download-animation" id="downloadBtn" onclick="downloadCredentials()">
                    📥 下载认证文件
                </button>
                
                <button class="btn" onclick="resetForm()">认证其他项目</button>
            </div>

            <div id="statusSection"></div>
            
            <div class="footer">
                <p>🔒 您的认证信息将安全保存，仅用于访问指定的 Google Cloud 项目</p>
                
                <!-- 项目信息 -->
                <div style="background-color: #f8f9fa; border: 1px solid #dee2e6; border-radius: 8px; padding: 15px; margin-top: 20px; text-align: center; border-left: 4px solid #17a2b8;">
                    <p style="margin: 6px 0; font-size: 15px; color: #495057;">GitHub: <a href="https://github.com/su-kaka/gcli2api" target="_blank" style="color: #17a2b8; text-decoration: none; font-weight: 500;">https://github.com/su-kaka/gcli2api</a></p>
                    <p style="margin: 6px 0; font-size: 15px; color: #dc3545; font-weight: 500;">⚠️ 禁止商业用途和倒卖 - 仅供学习使用 ⚠️</p>
                </div>
            </div>
        </div>
    </div>

    <script>
        let currentProjectId = '';
        let authInProgress = false;
        let authToken = '';
        let currentCredentials = null;

        function showStatus(message, type = 'info') {
            const statusSection = document.getElementById('statusSection');
            if (statusSection) {
                statusSection.innerHTML = `<div class="status ${type}">${message}</div>`;
                
                // 自动滚动到状态消息
                statusSection.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
            }
        }

        // 登录相关函数
        async function login() {
            const password = document.getElementById('password').value;
            
            if (!password) {
                showStatus('请输入密码', 'error');
                return;
            }

            try {
                const response = await fetch('/auth/login', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({ password: password })
                });

                const data = await response.json();
                
                if (response.ok) {
                    authToken = data.token;
                    document.getElementById('loginSection').classList.add('hidden');
                    document.getElementById('mainSection').classList.remove('hidden');
                    showStatus('登录成功', 'success');
                } else {
                    showStatus(`登录失败: ${data.detail || data.error || '密码错误'}`, 'error');
                }
            } catch (error) {
                showStatus(`网络错误: ${error.message}`, 'error');
            }
        }

        function handlePasswordEnter(event) {
            if (event.key === 'Enter') {
                login();
            }
        }

        // 获取认证头
        function getAuthHeaders() {
            return {
                'Content-Type': 'application/json',
                'Authorization': `Bearer ${authToken}`
            };
        }

        async function startAuth() {
            const projectId = document.getElementById('projectId').value.trim();
            // 项目ID现在是可选的
            currentProjectId = projectId || null;
            
            const btn = document.getElementById('getAuthBtn');
            btn.disabled = true;
            btn.textContent = '正在生成认证链接...';

            try {
                const requestBody = {};
                if (projectId) {
                    requestBody.project_id = projectId;
                    showStatus('使用指定的项目ID生成认证链接...', 'info');
                } else {
                    showStatus('将尝试自动检测项目ID，正在生成认证链接...', 'info');
                }

                const response = await fetch('/auth/start', {
                    method: 'POST',
                    headers: getAuthHeaders(),
                    body: JSON.stringify(requestBody)
                });

                const data = await response.json();
                
                if (response.ok) {
                    document.getElementById('authUrl').href = data.auth_url;
                    document.getElementById('authUrl').textContent = data.auth_url;
                    document.getElementById('authUrlSection').classList.remove('hidden');
                    
                    if (data.auto_project_detection) {
                        showStatus('认证链接已生成（将在认证完成后自动检测项目ID），请点击链接完成 OAuth 授权', 'info');
                    } else {
                        showStatus(`认证链接已生成（项目ID: ${data.detected_project_id}），请点击链接完成 OAuth 授权`, 'info');
                    }
                    authInProgress = true;
                } else {
                    showStatus(`生成认证链接失败: ${data.error || '未知错误'}`, 'error');
                }
            } catch (error) {
                showStatus(`网络错误: ${error.message}`, 'error');
            } finally {
                btn.disabled = false;
                btn.textContent = '获取认证链接';
            }
        }

        async function getCredentials() {
            if (!authInProgress) {
                showStatus('请先获取认证链接并完成 OAuth 授权', 'error');
                return;
            }

            const btn = document.getElementById('getCredsBtn');
            btn.disabled = true;
            btn.textContent = '等待 OAuth 回调...';

            try {
                showStatus('正在等待 OAuth 回调，请确保已完成浏览器中的授权...', 'info');
                
                const requestBody = {};
                if (currentProjectId) {
                    requestBody.project_id = currentProjectId;
                }
                
                const response = await fetch('/auth/callback', {
                    method: 'POST',
                    headers: getAuthHeaders(),
                    body: JSON.stringify(requestBody)
                });

                const data = await response.json();
                
                if (response.ok) {
                    currentCredentials = data.credentials;
                    document.getElementById('credentialsContent').textContent = JSON.stringify(data.credentials, null, 2);
                    document.getElementById('credentialsSection').classList.remove('hidden');
                    
                    if (data.auto_detected_project) {
                        showStatus(`认证成功！项目ID已自动检测为: ${data.credentials.project_id}，文件已保存到服务器: ${data.file_path}`, 'success');
                    } else {
                        showStatus(`认证成功！文件已保存到服务器: ${data.file_path}`, 'success');
                    }
                    
                    authInProgress = false;
                    
                    // 隐藏前面的步骤，突出显示成功结果
                    document.getElementById('authUrlSection').style.opacity = '0.6';
                } else {
                    // 检查是否需要项目选择
                    if (data.requires_project_selection && data.available_projects) {
                        let projectOptions = "请选择一个项目：\n\n";
                        data.available_projects.forEach((project, index) => {
                            projectOptions += `${index + 1}. ${project.name} (${project.projectId})\n`;
                        });
                        projectOptions += `\n请输入序号 (1-${data.available_projects.length}):`;
                        
                        const selection = prompt(projectOptions);
                        const projectIndex = parseInt(selection) - 1;
                        
                        if (projectIndex >= 0 && projectIndex < data.available_projects.length) {
                            const selectedProject = data.available_projects[projectIndex];
                            currentProjectId = selectedProject.projectId;
                            btn.textContent = '重新尝试获取认证文件';
                            showStatus(`使用选择的项目 ${selectedProject.name} (${selectedProject.projectId}) 重新尝试...`, 'info');
                            setTimeout(() => getCredentials(), 1000);
                            return;
                        } else {
                            showStatus('无效的选择，请重新开始认证', 'error');
                        }
                    }
                    // 检查是否需要手动输入项目ID
                    else if (data.requires_manual_project_id) {
                        const userProjectId = prompt('无法自动检测项目ID，请手动输入您的Google Cloud项目ID:');
                        if (userProjectId && userProjectId.trim()) {
                            // 重新尝试，使用用户输入的项目ID
                            currentProjectId = userProjectId.trim();
                            btn.textContent = '重新尝试获取认证文件';
                            showStatus('使用手动输入的项目ID重新尝试...', 'info');
                            setTimeout(() => getCredentials(), 1000);
                            return;
                        } else {
                            showStatus('需要项目ID才能完成认证，请重新开始并输入正确的项目ID', 'error');
                        }
                    } else {
                        showStatus(`认证失败: ${data.error || '获取认证文件失败'}`, 'error');
                        if (data.error && data.error.includes('未接收到授权回调')) {
                            showStatus('提示：请确保已完成浏览器中的 OAuth 认证，并看到了"OAuth authentication successful"页面', 'warning');
                        }
                    }
                }
            } catch (error) {
                showStatus(`网络错误: ${error.message}`, 'error');
            } finally {
                btn.disabled = false;
                btn.textContent = '获取认证文件';
            }
        }

        function downloadCredentials() {
            if (!currentCredentials) {
                showStatus('没有可下载的认证文件', 'error');
                return;
            }

            const filename = `${currentProjectId}-credentials.json`;
            const content = JSON.stringify(currentCredentials, null, 2);
            
            const blob = new Blob([content], { type: 'application/json' });
            const url = window.URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.style.display = 'none';
            a.href = url;
            a.download = filename;
            document.body.appendChild(a);
            a.click();
            window.URL.revokeObjectURL(url);
            document.body.removeChild(a);
            
            showStatus(`认证文件已下载: ${filename}`, 'success');
        }

        function resetForm() {
            // 重置表单
            document.getElementById('projectId').value = '';
            document.getElementById('authUrlSection').classList.add('hidden');
            document.getElementById('credentialsSection').classList.add('hidden');
            document.getElementById('authUrlSection').style.opacity = '1';
            
            // 重置状态
            currentProjectId = '';
            authInProgress = false;
            currentCredentials = null;
            
            showStatus('请输入新的 Project ID 开始认证', 'info');
        }

        // Project ID 折叠切换函数
        function toggleProjectIdSection() {
            const section = document.getElementById('projectIdSection');
            const icon = document.getElementById('projectIdToggleIcon');
            
            if (section.style.display === 'none') {
                section.style.display = 'block';
                icon.style.transform = 'rotate(90deg)';
                icon.textContent = '▼';
            } else {
                section.style.display = 'none';
                icon.style.transform = 'rotate(0deg)';
                icon.textContent = '▶';
            }
        }

        // 回调URL输入区域折叠切换函数
        function toggleCallbackUrlSection() {
            const section = document.getElementById('callbackUrlSection');
            const icon = document.getElementById('callbackUrlToggleIcon');

            if (section.style.display === 'none') {
                section.style.display = 'block';
                icon.style.transform = 'rotate(180deg)';
                icon.textContent = '▲';
            } else {
                section.style.display = 'none';
                icon.style.transform = 'rotate(0deg)';
                icon.textContent = '▼';
            }
        }

        // 处理回调URL的函数
        async function processCallbackUrl() {
            const callbackUrlInput = document.getElementById('callbackUrlInput');
            const callbackUrl = callbackUrlInput.value.trim();

            if (!callbackUrl) {
                showStatus('请输入回调URL', 'error');
                return;
            }

            // 简单验证URL格式
            if (!callbackUrl.startsWith('http://') && !callbackUrl.startsWith('https://')) {
                showStatus('请输入有效的URL（以http://或https://开头）', 'error');
                return;
            }

            // 检查是否包含必要参数
            if (!callbackUrl.includes('code=') || !callbackUrl.includes('state=')) {
                showStatus('❌ 这不是有效的回调URL！请确保：\n1. 已完成Google OAuth授权\n2. 复制的是浏览器地址栏的完整URL\n3. URL包含code和state参数', 'error');
                return;
            }

            showStatus('正在从回调URL获取凭证...', 'info');

            try {
                // 获取当前项目ID设置（如果有的话）
                const projectIdInput = document.getElementById('projectId');
                const projectId = projectIdInput ? projectIdInput.value.trim() : null;

                const response = await fetch('/auth/callback-url', {
                    method: 'POST',
                    headers: getAuthHeaders(),
                    body: JSON.stringify({
                        callback_url: callbackUrl,
                        project_id: projectId || null
                    })
                });

                const result = await response.json();

                if (result.credentials) {
                    // 显示成功信息
                    showStatus(result.message || '从回调URL获取凭证成功！', 'success');
                    
                    // 隐藏认证URL区域，显示凭证内容
                    document.getElementById('authUrlSection').classList.add('hidden');
                    document.getElementById('credentialsSection').classList.remove('hidden');
                    
                    // 显示凭证内容
                    document.getElementById('credentialsContent').innerHTML = 
                        '<pre>' + JSON.stringify(result.credentials, null, 2) + '</pre>';
                    
                    // 设置全局变量供下载使用
                    window.currentCredentials = result.credentials;
                    
                    // 清空输入框
                    callbackUrlInput.value = '';
                    
                } else if (result.requires_manual_project_id) {
                    showStatus('需要手动指定项目ID，请在高级选项中填入Google Cloud项目ID后重试', 'error');
                } else if (result.requires_project_selection) {
                    let projectOptions = '\n\n可用项目：\n';
                    result.available_projects.forEach(project => {
                        projectOptions += `• ${project.name} (ID: ${project.projectId})\n`;
                    });
                    showStatus('检测到多个项目，请在高级选项中指定项目ID：' + projectOptions, 'error');
                } else {
                    showStatus(result.error || '从回调URL获取凭证失败', 'error');
                }
            } catch (error) {
                console.error('从回调URL获取凭证时出错:', error);
                showStatus(`从回调URL获取凭证失败: ${error.message}`, 'error');
            }
        }

        // 页面加载时的初始化
        window.onload = function() {
            showStatus('请输入密码登录以开始 OAuth 认证', 'info');
            
            // 自动聚焦到密码输入框
            document.getElementById('password').focus();
        };
    </script>
</body>
</html>